﻿
@{
    Layout =null;
}


<meta charset="UTF-8" />
<!--生成设备虚拟窗口便于开发-->
<meta name="viewport" content="width=device-width, initial-scale=1.0,  user-scalable=no" />
<!--解决浏览器兼容性-->
<meta http-equiv="x-ua-compatible" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit" />
<title style="text-align:center">领取红包</title>
<link href="~/Content/MarketCss/animate.min.css" rel="stylesheet" />
@*<script src="~/Scripts/jquery.js"></script>*@
<script src="~/Scripts/jquery-3.3.1.min.js"></script>

<style>
    * {
        padding: 0;
        margin: 0;
        font-family: 微软雅黑;
    }

    .red-con {
        width: 100%;
        height: 100%;
        background: url("/Content/webImgs/Market/redPacket/redPacket.gif");
        background-size: 100% 100%;
        position: absolute;
        overflow: hidden;
    }
     .red-con .clickRequest {
        position: absolute;
        bottom: 5%;
        right: 0;
        left: 0;
        margin: 0 auto;
        width: 70%;
        height: 55px;
        line-height: 55px;
        text-align: center;
        background-color: #F9BF26;
        border-radius: 10px;
        color: #763401;
        font-size: 27px;
        font-weight: 700;
    }

        .red-con .bg-con {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            background-color: rgba(27, 1, 0, 0.8);
            display: none;
        }

            .red-con .bg-con .small-bg {
                width: 100%;
                height: 50%;
                position: absolute;
                left: 0;
                bottom: -50%;
                background: url("/Content/webImgs/Market/redPacket/redPacket-02B.png");
                background-size: 100% 100%;
                z-index: 10;
            }

                .red-con .bg-con .small-bg > p:nth-child(1) {
                    text-align: center;
                    color: #FBCE02;
                    font-size: 25px;
                    margin: 10px auto 0;
                }

                    .red-con .bg-con .small-bg > p:nth-child(1) > span {
                        color: #FBCE02;
                        font-size: 55px;
                        font-weight: 600;
                        text-align: center;
                    }

                .red-con .bg-con .small-bg > p:nth-child(2) {
                    font-size: 23px;
                    text-align: center;
                    color: whitesmoke;
                }

                .red-con .bg-con .small-bg > p:nth-child(3) {
                    font-size: 20px;
                    text-align: center;
                    color: whitesmoke;
                }

                .red-con .bg-con .small-bg > a.add {
                    display: block;
                    text-decoration: none;
                    margin: 0 auto;
                    width: 86%;
                    height: 50px;
                    line-height: 50px;
                    text-align: center;
                    background-color: #FFCC00;
                    border-radius: 10px;
                    color: #763401;
                    font-size: 20px;
                    font-weight: 700;
                }
</style>
<div class="red-con">
    <div class="clickRequest animated swing">
        点击领取红包
    </div>
    <div class="bg-con">
        <div class="small-bg">
            <p class="">
                <span id="showMoney"></span>元
            </p>
            <p id="company">
            </p>
            <p id="Congrats">
            </p>
            <a class="add" href="/Market/RedPack2">
                立即领取红包
            </a>
        </div>
    </div>
</div>

<script>

    $(function () {
        //获取url参数值
        //function getUrlParam(name) {
        //    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        //    var r = window.location.search.substr(1).match(reg);  //匹配目标参数  window.location.search获取？之后字符串
        //    if (r != null) {
        //        return unescape(r[2]);  //解码返回参数值
        //    }
        //    else {
        //        return null; //返回参数值
        //    }
        //}
        setTimeout(function () {
            $('.red-con').css({ 'background': 'url("/Content/webImgs/Market/redPacket/redPacket-01.jpg")', 'backgroundSize': '100% 100%' });
        }, 800);
        $('.clickRequest').click(function () {
            $.ajax({
                type: "get",
                url: '/Market/GetAwards',
                data: { Aid: 1 },
                success: function (data) {
                    //console.log(data);
                    $('.bg-con .small-bg #showMoney').text(data.Denomination).parent().next().text(data.EnterpriseName).next().text(data.Congrats);
                    $('.bg-con .small-bg .add').attr('href', '/Market/RedPack2?Aid=' + data.ID + '&Uid=2&code=0243010076074496')
                }
            });

            var that = this;
            $(this).next('.bg-con').slideDown(function () {
                $(that).next('.bg-con').children('.small-bg').animate({
                    bottom: 0
                });
                $(that).next('.bg-con').children('.small-bg').children('p:nth-child(1)').addClass('animated bounceInLeft');
                $(that).next('.bg-con').children('.small-bg').children('a.add').addClass('animated  zoomIn');
              
            });
        })
    });


</script>

